<script setup>
import { reactive, ref } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const formRef = ref()

const dynamicValidateForm = reactive({
  domains: [
    {
      key: Date.now(),
      key1: Date.now(),
      key2: Date.now(),
      key3: Date.now(),
      key4: Date.now(),
      key5: Date.now(),
      name: 'id',
      typeAndsize: 'bigint(20)',
      isRequire: true,
      description: '序号',
      defaultValue: null,
      formComponent: 'input'
    }
  ],
  tableName: ''
})
// 是否展开右侧边栏
const dialog = ref(false)
// 校验规则
const rules = reactive({
  tableName: [
    { required: true, message: '数据库表名称不能为空', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在3到20之间', trigger: 'blur' }
  ],
  description: [{ required: true, message: '数据库表注释', trigger: 'blur' }]
})
// 是否必选选择框数组
const isRequires = [
  {
    label: '必选项',
    value: true
  },
  {
    label: '非必选项',
    value: false
  }
]
// 表单内容
const gridData = [
  {
    key: '禁止覆盖的数据库',
    value: 'sys_user,sys_role,sys_user_role,sys_permission,sys_role_permission。'
  },
  {
    key: 'SQL命名前缀',
    value: 'sys_,t_,如果需要自定义需要在Constant常量类中自己定义。'
  },
  {
    key: '命名规范',
    value: '不能以关键字进行命名，字段名称按照_命名将会转为驼峰命名。'
  }
]
const removeDomain = (item) => {
  const index = dynamicValidateForm.domains.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.domains.splice(index, 1)
  }
}

const addDomain = () => {
  dynamicValidateForm.domains.push({
    key: Date.now() + 1,
    key1: Date.now() + 2,
    key2: Date.now() + 3,
    key3: Date.now() + 4,
    key4: Date.now() + 5,
    key5: Date.now() + 6,
    name: null,
    typeAndsize: 'varchar(255)',
    isRequire: true,
    description: null,
    defaultValue: null,
    formComponent: 'input'
  })
}

const submitForm = (formEl) => {
 ElMessage({
   type:'warning',
   message:'请添加up主微信navicat15购置付费版本！'
 })
  return

}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  location.reload()
}
</script>
<template>
  <el-form
    ref="formRef"
    :rules="rules"
    :model="dynamicValidateForm"
    label-width="10px"
    class="demo-dynamic"
  >
    <el-row :gutter="20">
      <el-col :span="3">
        <el-form-item prop="tableName">
          <el-input v-model="dynamicValidateForm.tableName" placeholder="输入数据库表名称" />
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item prop="description">
          <el-input v-model="dynamicValidateForm.description" placeholder="输入表注释" />
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-button @click="addDomain" type="primary">新增数据库字段</el-button>
        <el-button @click="resetForm(formRef)" type="warning">清空数据</el-button>
        <el-button @click="dialog = true" type="success">查看教程</el-button>
        <el-button @click="submitForm(formRef)" type="danger">生成前后端代码</el-button>
      </el-col>
    </el-row>
    <!--    分条件进行判断渲染展示，例如固定的id为第0个-->
    <el-row v-for="(domain, index) in dynamicValidateForm.domains" :key="index">
      <!--第二种条件进行判断是id的时候-->

      <!--      数据字段名-->
      <el-col :span="3">
        <el-form-item
          :key="domain.key"
          :prop="'domains.' + index + '.name'"
          :rules="{
            required: true,
            message: '数据字段名不能为空',
            trigger: 'blur'
          }"
        >
          <el-input v-model="domain.name" placeholder="数据字段名" :disabled="index === 0" />
        </el-form-item>
      </el-col>
      <!--      数据类型和长度-->
      <el-col :span="3">
        <el-form-item
          :key="domain.key1"
          :prop="'domains.' + index + '.typeAndsize'"
          :rules="{
            required: true,
            message: '数据类型和长度不能为空',
            trigger: 'blur'
          }"
        >
          <el-select
            v-model="domain.typeAndsize"
            :disabled="index === 0"
            placeholder="数据类型和长度"
          >
            <el-option label="varchar(64)" value="varchar(64)"></el-option>
            <el-option label="varchar(255)" value="varchar(255)"></el-option>
            <el-option label="int(1)" value="int(1)"></el-option>
            <el-option label="int(5)" value="int(5)"></el-option>
            <el-option label="int(10)" value="int(10)"></el-option>
            <el-option label="bigint(20)" value="bigint(20)"></el-option>
            <el-option label="double(10,2)" value="double(10,2)"></el-option>
            <el-option label="datetime" value="datetime"></el-option>
            <el-option label="text" value="text"></el-option>
            <el-option label="longtext" value="longtext"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--      默认值-->
      <el-col :span="3">
        <el-form-item :key="domain.key2" :prop="'domains.' + index + '.defaultValue'">
          <el-input
            v-model="domain.defaultValue"
            placeholder="请输入默认值"
            :disabled="index === 0"
          />
        </el-form-item>
      </el-col>
      <!--      字段注释-->
      <el-col :span="3">
        <el-form-item
          :key="domain.key3"
          :prop="'domains.' + index + '.description'"
          :rules="{
            required: true,
            message: '字段注释不能为空',
            trigger: 'blur'
          }"
        >
          <el-input v-model="domain.description" placeholder="字段注释" :disabled="index === 0" />
        </el-form-item>
      </el-col>
      <!--      是否必选-->
      <el-col :span="3">
        <el-form-item
          :key="domain.key4"
          :prop="'domains.' + index + '.isRequire'"
          :rules="{
            required: true,
            message: '是否为必选不能为空',
            trigger: 'change'
          }"
        >
          <el-select v-model="domain.isRequire" :disabled="index === 0" placeholder="是否必选">
            <el-option
              v-for="(item, index) in isRequires"
              :label="item.label"
              :key="index + ''"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--      表单类型-->
      <el-col :span="3">
        <el-form-item
          :key="domain.key5"
          :prop="'domains.' + index + '.formComponent'"
          :rules="{
            required: true,
            message: '表单类型不能为空',
            trigger: 'change'
          }"
        >
          <el-select
            v-model="domain.formComponent"
            :disabled="index === 0"
            placeholder="选择表单类型"
          >
            <el-option label="普通表单" value="input"></el-option>
            <el-option label="滑块" value="slider"></el-option>
            <el-option label="评分" value="rate"></el-option>
            <el-option label="计数器" value="number"></el-option>
            <el-option label="电话" value="phone"></el-option>
            <el-option label="邮箱" value="email"></el-option>
            <el-option label="图片" value="img"></el-option>
            <el-option label="文件" value="file"></el-option>
            <el-option label="时间选择器" value="time"></el-option>
            <el-option label="日期选择器" value="date"></el-option>
            <el-option label="富文本" value="textarea"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--            删除button-->
      <el-popconfirm
        confirm-button-text="确认"
        cancel-button-text="取消"
        :icon="InfoFilled"
        icon-color="#626AEF"
        title="确认删除吗？"
        @confirm="removeDomain(domain)"
      >
        <template #reference>
          <el-button text type="danger" :disabled="index === 0">删除</el-button>
        </template>
      </el-popconfirm>
    </el-row>
  </el-form>

  <!--  教程侧边栏页面-->
  <el-drawer v-model="dialog" title="代码生成器手册" direction="rtl" size="50%">
    <el-table :data="gridData" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
      <el-table-column property="key" label="标题" width="150" />
      <el-table-column property="value" label="内容" />
    </el-table>
  </el-drawer>
</template>
<style lang="scss"></style>
